<template>
  <div class="ma-content-block lg:flex justify-between p-4">
    <!-- CRUD 组件 -->
    <ma-crud :options="options" :columns="columns" ref="crudRef">
      <template #tableBeforeButtons>
        <a-button type="primary" @click="handleAI">AI生成</a-button>
      </template>
    </ma-crud>

    <a-modal
      v-model:visible="aiShow"
      title="ai生成"
      @cancel="aiShow = false"
      :width="800"
      :footer="true"
      @ok="ok()"
    >
      <div class="flex align_center">
        <div style="width: 100px">事件编码:</div>
        <a-input
          v-model="aieventCoding"
          :style="{ flex: 1 }"
          placeholder="请输入事件编码"
          allow-clear
        />
      </div>
    </a-modal>
  </div>
</template>
<script setup>
import { ref, reactive } from "vue";
import secureDispositionManage from "@/api/secure/secureDispositionManage";
import { Message } from "@arco-design/web-vue";
import tool from "@/utils/tool";
import * as common from "@/utils/common";
import { request } from "@/utils/request.js";
import { data } from "autoprefixer";
const crudRef = ref();
const props = defineProps({
  equipment_ids: {
    type: Number,
    default: 0,
  },
});
const aiShow = ref(false);
const aieventCoding = ref("");
const handleAI = () => {
  aieventCoding.value = "";
  aiShow.value = true;
};
const ok = () => {
  request({
    url: "secure/dispositionManage/ai_sc",
    method: "post",
    data: {
      bm: aieventCoding.value,
    },
  }).then((res) => {
    Message.success("生成成功！");
  });
};
const numberOperation = (newValue, id, numberName) => {
  secureDispositionManage
    .numberOperation({ id, numberName, numberValue: newValue })
    .then((res) => {
      res.success && Message.success(res.message);
    })
    .catch((e) => {
      console.log(e);
    });
};

const switchStatus = (statusValue, id, statusName) => {
  secureDispositionManage
    .changeStatus({ id, statusName, statusValue })
    .then((res) => {
      res.success && Message.success(res.message);
    })
    .catch((e) => {
      console.log(e);
    });
};

const options = reactive({
  id: "flyos_secure_disposition_manage",
  rowSelection: {
    showCheckedAll: true,
  },
  pk: "id",
  operationColumn: true,
  operationWidth: 160,
  formOption: {
    viewType: "modal",
    width: 600,
  },
  api: secureDispositionManage.getList,
  recycleApi: secureDispositionManage.getRecycleList,
  add: {
    show: true,
    api: secureDispositionManage.save,
    auth: ["secure:dispositionManage:save"],
  },
  edit: {
    show: true,
    api: secureDispositionManage.update,
    auth: ["secure:dispositionManage:update"],
  },
  delete: {
    show: true,
    api: secureDispositionManage.deletes,
    auth: ["secure:dispositionManage:delete"],
    realApi: secureDispositionManage.realDeletes,
    realAuth: ["secure:dispositionManage:realDeletes"],
  },
  recovery: {
    show: true,
    api: secureDispositionManage.recoverys,
    auth: ["secure:dispositionManage:recovery"],
  },
  beforeRequest: (params) => {
    params.equipment_id = props.equipment_ids;
  },
  beforeAdd: (formData) => {
    formData.equipment_id = props.equipment_ids;
    return true;
  },
  import: {
    show: true,
    url: "secure/dispositionManage/import",
    templateUrl: "secure/dispositionManage/downloadTemplate",
    auth: ["secure:dispositionManage:import"],
  },
  export: {
    show: true,
    url: "secure/dispositionManage/export",
    auth: ["secure:dispositionManage:export"],
  },
});

const columns = reactive([
  {
    title: "ID",
    dataIndex: "id",
    formType: "input",
    addDisplay: false,
    editDisplay: false,
    hide: true,
    commonRules: {
      required: true,
      message: "请输入ID",
    },
  },
  {
    title: "事件编码",
    dataIndex: "event_coding",
    formType: "input",
    search: true,
    commonRules: {
      required: true,
      message: "请输入事件编码",
    },
  },
  {
    title: "事件名称",
    dataIndex: "event_name",
    formType: "input",
    search: true,
    commonRules: {
      required: true,
      message: "请输入事件名称",
    },
  },
  {
    title: "事件等级",
    dataIndex: "event_grade",
    align: "center",
    formType: "select",
    dict: {
      // 远程通用接口请求，新版代码生成都有一个 remote 接口
      remote: "secure/gradeManage/remote",
      // 指定组件接收的props
      props: { label: "grade_name", value: "id" },
      // 开启分页
      openPage: true,
      // 远程请求配置项
      remoteOption: {
        // 按用户名排序
        sort: { id: "desc" }, // 如果不指定排序方式，默认为正序排序
        // 设置查询的字段
        select: ["id", "grade_name"],
        // 设置数据过滤
        filter: {},
        // 关联模型
        relations: [],
      },
      translation: true,
    },
  },
  {
    title: "事件类型",
    dataIndex: "event_type",
    formType: "select",
    search: true,
    commonRules: {
      required: true,
      message: "请输入事件类型",
    },
    dict: {
      name: "event_type",
      props: {
        label: "title",
        value: "key",
      },
      translation: true,
    },
  },
  {
    title: "标准处理流程",
    dataIndex: "handle_flow",
    formType: "input",
    search: true,
    commonRules: {
      required: true,
      message: "请输入标准处理流程",
    },
  },
  {
    title: "通知人员",
    dataIndex: "notify_user",
    align: "center",
    formType: "select",
    dict: {
      // 远程通用接口请求，新版代码生成都有一个 remote 接口
      remote: "system/user/remote",
      // 指定组件接收的props
      props: { label: "nickname", value: "id" },
      // 开启分页
      openPage: true,
      // 远程请求配置项
      remoteOption: {
        // 按用户名排序
        sort: { id: "desc" }, // 如果不指定排序方式，默认为正序排序
        // 设置查询的字段
        // select: ["id", "nickname"],
        // 设置数据过滤
        filter: {
          wx_user_type: 8,
        },
        // 关联模型
        relations: [],
      },
      translation: true,
    },
    multiple: true,
  },
  {
    title: "创建者",
    dataIndex: "created_by",
    formType: "input",
    addDisplay: false,
    editDisplay: false,
    hide: true,
  },
  {
    title: "更新者",
    dataIndex: "updated_by",
    formType: "input",
    addDisplay: false,
    editDisplay: false,
    hide: true,
  },
  {
    title: "创建时间",
    dataIndex: "created_at",
    formType: "date",
    addDisplay: false,
    editDisplay: false,
    hide: true,
    showTime: true,
  },
  {
    title: "更新时间",
    dataIndex: "updated_at",
    formType: "date",
    addDisplay: false,
    editDisplay: false,
    hide: true,
    showTime: true,
  },
  {
    title: "删除时间",
    dataIndex: "deleted_at",
    formType: "date",
    addDisplay: false,
    editDisplay: false,
    hide: true,
    showTime: true,
  },
]);
</script>
<script>
export default { name: "secure:dispositionManage" };
</script>
